<!--  -->
<template>
  <div id="index">
      <!-- 轮播图 -->
    <cube-slide ref="slide" :data="items" @change="changePage">
  <cube-slide-item v-for="(item, index) in items" :key="index" @click.native="clickHandler(item, index)">
    <a :href="item.url">
      <img class="piclun" :src="item.image">
    </a>
  </cube-slide-item>
</cube-slide>
          <!-- 分类 -->
     <cube-slide ref="slidelists" :auto-play="false" :data="lists" @change="changePage">
  <cube-slide-item v-for="(list, index) in lists" :key="index">
                 <ul class="listui">  
                        <li class="listli" v-for="(item,index1) in list" :key="index1">
                            <a>
                                <img :src="item.image" />
                                <p>{{item.text}}</p>
                            </a>
                        </li>
                 </ul>
  </cube-slide-item>
</cube-slide>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      lists:[]
    }
  },
  methods: {
    changePage(current) {
    //   console.log('当前轮播图序号为:' + current)
    },
    clickHandler(item, index) {
    //   console.log(item, index)
    }
  },
  async created(){

 try{
     const items=await this.$http.get('/api/banner')
     this.items=items.data
     const lists=await this.$http.get('/api/lister')
     this.lists=lists.data
 }catch(err){
       console.log(err)
 }
        // this.$http.get('/api/banner').then(res=>{
        //                  console.log(res)
        //                  this.items=res.data
        //   }).catch(err=>{
        //       console.log(err)
        //   })
        //    this.$http.get('/api/lister').then(res=>{
        //                  console.log(res)
        //                  this.lists=res.data
        //   }).catch(err=>{
        //       console.log(err)
        //   })
  }
}

</script>
<style scoped>
#index a .piclun{
    display: block;
    width: 100%;
    height: 175px;
}
#index .listui{
     display: flex;
     flex-wrap: wrap;
}
#index .listui .listli{
     width: 20%;
   display: flex;
   justify-content: center;
   
}
#index .listui .listli img{
  display: block;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    padding: 5px;
}
#index .listui .listli p{
  text-align: center;
    font-size: 14px;
    padding-bottom: 10px;
}
</style>